<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="keys" content="">
<meta name="author" content="">
<link rel="stylesheet" href="${APP_PATH}/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="${APP_PATH}/css/font-awesome.min.css">
<link rel="stylesheet" href="${APP_PATH}/css/login.css">
<title>登录界面</title>
</head>
<body>
	<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
		<div class="container">
			<div class="navbar-header">
				<div>
					<a class="navbar-brand" href="index.html" style="font-size: 32px;">众筹网-创意产品众筹平台</a>
				</div>
			</div>
		</div>
	</nav>

	<div class="container">

		<form id="loginForm" action="doLogin" method="post"
			class="form-signin" role="form">
			<h2 class="form-signin-heading">
				<i class="glyphicon glyphicon-user"></i> 用户登录
			</h2>
			<div class="form-group has-success has-feedback">
				<input type="text" class="form-control" id="loginName"
					name="loginName" placeholder="请输入登录账号" autofocus> <span
					class="glyphicon glyphicon-user form-control-feedback"></span>
			</div>
			<div class="form-group has-success has-feedback">
				<input type="text" class="form-control" id="password"
					name="password" placeholder="请输入登录密码" style="margin-top: 10px;">
				<span class="glyphicon glyphicon-lock form-control-feedback"></span>
				<h5 style="color: red; font-weight: bold;">${param.errMess}</h5>
			</div>
			<div class="form-group has-success has-feedback">
				<select class="form-control">
					<option value="member">会员</option>
					<option value="user">管理</option>
				</select>
			</div>
			<div class="checkbox">
				<label> <input type="checkbox" value="remember-me">
					记住我
				</label> <br> <label> 忘记密码 </label> <label style="float: right">
					<a href="reg.html">我要注册</a>
				</label>
			</div>
			<a class="btn btn-lg btn-success btn-block" onclick="dologin()">
				登录</a>
		</form>
	</div>
	<script src="${APP_PATH}/jquery/jquery-2.1.1.min.js"></script>
	<script src="${APP_PATH}/bootstrap/js/bootstrap.min.js"></script>
	<!-- 使用layer弹窗插件 -->
	<script src="${APP_PATH}/layer/layer.js"></script>
	<script>
		function dologin() {
			//先进行非空校验
			var loginName = $("#loginName").val();
			//表单元素的value值永远不可能为null，不填时是空字符串""
			if (loginName == "") {
				//time是对话框的存在时间，icon是图标，shift是对话框的出现方式
				layer.msg("用户名不能为空！", {
					time : 3000,
					icon : 0,
					shift : 3
				}, function() {
				});
				return;
			}
			var password = $("#password").val();
			if (password == "") {
				layer.msg("用户密码不能为空！", {
					time : 3000,
					icon : 0,
					shift : 3
				}, function() {
				});
				return;//用户名和密码为空串时都会终止向下执行
			}

			//使用ajax提交表单到后台
			var loadingIndex = null;
			$.ajax({
				url : "doLogin",
				type : "post",
				data : {
					"loginName" : loginName,
					"password" : password,
				},
				beforeSend : function() {
					loadingIndex = layer.msg("处理中", {
						icon : 16
					});
				},
				success : function(result) {
					layer.close(loadingIndex);
					if(result.success){
						window.location.href="main";
					}else{
						layer.msg("用户名或密码错误！", {
							time : 3000,
							icon : 5,
							shift : 3
						}, function() {
						});
					}
				}
			});
		}
	</script>
</body>
</html>